<script setup lang="ts">

</script>

<template>
  <el-card shadow="never" class="pending">
    <template #header>
      <VipIcon icon="ball-pen-line" />
      待处理
      <el-badge class="item" :value="6" />
    </template>

    <el-row :gutter="10">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <el-card shadow="never" class="pending-left">
          <div class="parting-line parting-line-danger"></div>
          <div>
              <span class="pending-title pending-title-danger">
            订单预警
            <span>产品爆单，请及时处理</span>
          </span>
            <el-tag size="small">完成中</el-tag>
            <span class="pending-tips">预警原因：用户投诉发货不及时</span>
          </div>
        </el-card>
      </el-col>

      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <el-card shadow="never" class="pending-right">
          <div class="parting-line parting-line-primary"></div>
          <div>
              <span class="pending-title pending-title-primary">
            售后工单
            <span>用户张*给予五星好评</span>
          </span>
            <el-tag size="small" type="danger">未完成</el-tag>
            <span class="pending-tips">订单号：12345689654321</span>
          </div>

        </el-card>
      </el-col>
    </el-row>

  </el-card>
</template>

<style scoped lang="scss">
.pending {
  :deep() {
    sup {
      top: -1px;
    }
    .el-badge{
      top: 2px !important;
      margin-left: 3px;
    }

    .el-tag {
      margin-right: 5px;
    }

    .pending-left, .pending-right {
      margin-bottom: 0 !important;

      .el-card__body {
        height: 139px !important;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }

    .pending-left {
      background: rgba(240, 2, 20, 0.098);
      border: 0 !important;
    }

    .pending-right {
      background: var(--el-color-primary-light-9);
      //background: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-white)) no-repeat;
      border: 0 !important;
    }

    .parting-line {
      width: 10px;
      height: 70%;
      margin: 15px;
      border-radius: 10px;

      &-danger {
        background: var(--el-color-danger);
      }

      &-primary {
        background: var(--el-color-primary);
      }
    }

    .pending-title {
      display: block;
      //margin-top: 12px;
      font-size: var(--el-font-size-big);
      font-weight: bold;
      line-height: 38px;

      span {
        font-size: var(--el-font-size-small);
        font-weight: normal;
      }

      &-danger {
        color: var(--el-color-danger);
      }

      &-primary {
        color: var(--el-color-primary);
      }
    }

    .pending-tips {
      font-size: var(--el-font-size-small);
      color: var(--el-color-grey);
    }

  }
}

</style>
